/**
 * name: '', 名称
 * type: '', 类型, group：分组
 * fieldName: '', 字段名
 * fieldType: '', 字段类型：input, number, select, image
 * options: '', 字段类型为select时的选项值，多个以逗号分割
 * show: 是否显示，接收参数为data，当前已设置的值，无此函数时默认返回为true
 */
export const fontFamily = [
  {value: '宋体', key: '宋体'},
  {value: '微软雅黑', key: 'Microsoft YaHei'},
  {value: '方正小标宋简体', key: '方正小标宋简体'},
  {value: '黑体', key: '黑体'},
  {value: '幼圆', key: '幼圆'},
  {value: '楷体', key: '楷体'},
  {value: 'Arial', key: 'Arial'},
  {value: 'Arial Black', key: 'Arial Black'},
  {value: 'Andale Mono', key: 'Andale Mono'},
  {value: 'Comic Sans MS', key: 'Comic Sans MS'},
  {value: 'Courier New', key: 'Courier New'},
  {value: 'helvetica', key: 'helvetica'},
  {value: 'Impact', key: 'Impact'},
  {value: 'Tahoma', key: 'Tahoma'},
  {value: 'Times New Roman', key: 'Times New Roman'},
];

export const fontStyle = (prefix) => [
  {
    name: '字体大小',
    fieldName: (prefix || '') + 'fontSize',
    fieldType: 'number',
    default: 14
  },
  {
    name: '字体间距',
    fieldName: (prefix || '') + 'letterSpacing',
    fieldType: 'input',
  },
  {
    name: '字体行距',
    fieldName: (prefix || '') + 'lineHeight',
    fieldType: 'number',
    point: 1,
    default: 1.2
  },
  {
    name: '字体样式',
    fieldName: (prefix || '') + 'fontFamily',
    fieldType: 'select',
    allowCreate: true,
    options: fontFamily
  },
  {
    name: '字体加粗',
    fieldName: (prefix || '') + 'fontWeight',
    fieldType: 'select',
    default: 'normal',
    allowCreate: true,
    options: [
      {value: 'normal', key: 'normal'},
      {value: 'bold', key: 'bold'},
      {value: 'bolder', key: 'bolder'},
      {value: 'lighter', key: 'lighter'},
    ],
  },
  {
    name: '字体颜色',
    fieldName: (prefix || '') + 'fontColor',
    fieldType: 'color-picker',
  },
  {
    name: '鼠标样式',
    fieldName: (prefix || '') + 'cursor',
    fieldType: 'select',
    default: '',
    options: [
      {key: 'default', value: '默认'},
      {key: 'pointer', value: '手指'},
      {key: 'text', value: '文本'},
      {key: 'copy', value: '复制'},
      {key: 'move', value: '移动'},
      {key: 'help', value: '帮助'},
      {key: 'wait', value: '等待'},
      {key: 'crosshair', value: '十字'},
    ],
  },
];

export const commonStyle = [
  {
    name: '背景',
    type: 'group',
    children: [
      {
        name: '背景模式',
        fieldName: 'bgMode',
        fieldType: 'buttons',
        options: '图片,线性,径向,颜色',
        default: '颜色'
      },
      {
        name: '背景图片',
        fieldName: 'imageId',
        fieldType: 'image',
        width: 60,
        height: 60,
        show: (data) => data['bgMode'] === '图片'
      },
      {
        name: '背景重复',
        fieldName: 'background-repeat',
        fieldType: 'buttons',
        options: [
          {key: 'repeat-x', value: '横向'},
          {key: 'repeat-y', value: '纵向'},
          {key: 'repeat', value: '重复'},
          {key: 'no-repeat', value: '不重复'}
        ],
        default: 'no-repeat',
        show: (data) => data['bgMode'] === '图片'
      },
      {
        name: '背景尺寸',
        fieldName: 'background-size',
        fieldType: 'buttons',
        options: [
          {key: '100% 100%', value: '铺满'},
          {key: 'cover', value: '覆盖'},
          {key: 'contain', value: '填充'},
          {key: 'auto', value: '自适应'},
        ],
        default: 'contain',
        show: (data) => data['bgMode'] === '图片'
      },
      {
        name: '开始颜色',
        fieldName: 'start-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['bgMode'] === '线性' || data['bgMode'] === '径向'
      },
      {
        name: '结束颜色',
        fieldName: 'end-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['bgMode'] === '线性' || data['bgMode'] === '径向'
      },
      {
        name: '渐变方向',
        fieldName: 'gradient-direction',
        fieldType: 'buttons',
        options: [
          {key: '90deg', value: '水平'},
          {key: '180deg', value: '垂直'},
        ],
        show: (data) => data['bgMode'] === '线性'
      },
      {
        name: '渐变形状',
        fieldName: 'gradient-shape',
        fieldType: 'buttons',
        options: [
          {key: 'circle', value: '圆形'},
          {key: 'ellipse', value: '椭圆'},
        ],
        show: (data) => data['bgMode'] === '径向'
      },
      {
        name: '背景位置',
        fieldName: 'background-position',
        fieldType: 'select',
        options: [
          {key: 'top left', value: '顶部居左'},
          {key: 'top center', value: '顶部居中'},
          {key: 'top right', value: '顶部居右'},
          {key: 'center left', value: '中间居左'},
          {key: 'center center', value: '中间居中'},
          {key: 'center right', value: '中间居右'},
          {key: 'bottom left', value: '底部居左'},
          {key: 'bottom center', value: '底部居中'},
          {key: 'bottom right', value: '底部居右'},
        ],
        default: 'center right',
        show: (data) => data['bgMode'] === '图片'
      },
      {
        name: '背景颜色',
        fieldName: 'background-color',
        fieldType: 'color-picker',
        show: (data) => data['bgMode'] === '颜色' || data['bgMode'] === '图片'
      },
      {
        name: '背景模糊',
        fieldName: 'filter',
        fieldType: 'number'
      }
    ]
  },
  {
    name: '布局',
    type: 'group',
    children: [
      {
        name: '布局模式',
        fieldName: 'display',
        fieldType: 'buttons',
        default: '',
        options: [
          {key: '', value: '无'},
          {key: 'inline', value: '内联'},
          {key: 'block', value: '块级'},
          {key: 'inline-block', value: '行块'},
          {key: 'flex', value: '弹性'},
          {key: 'none', value: '隐藏'}
        ]
      },
      {
        name: '排列方向',
        fieldName: 'flex-direction',
        fieldType: 'buttons',
        default: 'row',
        options: [
          {key: 'row', value: '水平'},
          {key: 'column', value: '垂直'},
          {key: 'row-reverse', value: '水平反转'},
          {key: 'column-reverse', value: '垂直反转'},
        ],
        show: (data) => data['display'] === 'flex'
      },
      {
        name: '主轴对齐',
        fieldName: 'justify-content',
        fieldType: 'buttons',
        default: 'flex-start',
        options: [
          {key: 'flex-start', value: '起点'},
          {key: 'center', value: '居中'},
          {key: 'flex-end', value: '终点'},
          {key: 'space-between', value: '两端'},
          {key: 'space-around', value: '均匀'},
          {key: 'space-evenly', value: '等距'},
        ],
        show: (data) => data['display'] === 'flex'
      },
      {
        name: '侧轴对齐',
        fieldName: 'align-items',
        fieldType: 'buttons',
        default: 'center',
        options: [
          {key: 'flex-start', value: '起点'},
          {key: 'center', value: '居中'},
          {key: 'flex-end', value: '终点'},
          {key: 'stretch', value: '拉伸'},
          {key: 'baseline', value: '基线'},
        ],
        show: (data) => data['display'] === 'flex'
      },
      {
        name: '是否换行',
        fieldName: 'flex-wrap',
        fieldType: 'buttons',
        default: 'nowrap',
        options: [
          {key: 'nowrap', value: '不换行'},
          {key: 'wrap', value: '换行'},
        ],
        show: (data) => data['display'] === 'flex'
      },
      {
        name: '自动伸展',
        fieldName: 'flex-grow',
        fieldType: 'buttons',
        default: '',
        options: [
          {value: '无', key: ''},
          {value: '是', key: '1'},
          {value: '否', key: '0'}
        ],
        description: '上层容器为弹性布局时有效'
      },
      {
        name: '自动收缩',
        fieldName: 'flex-shrink',
        fieldType: 'buttons',
        default: '',
        options: [
          {value: '无', key: ''},
          {value: '是', key: '1'},
          {value: '否', key: '0'}
        ],
        description: '上层容器为弹性布局时有效'
      }
    ]
  },
  {
    name: '定位类型',
    type: 'group',
    children: [
      {
        name: '定位类型',
        fieldName: 'position',
        fieldType: 'buttons',
        default: '',
        options: [
          {key: '', value: '无'},
          {key: 'static', value: '静态'},
          {key: 'relative', value: '相对'},
          {key: 'absolute', value: '绝对'},
          {key: 'fixed', value: '固定'},
          {key: 'sticky', value: '粘性'},
        ]
      },
      {
        name: '边距',
        fieldName: 'position-margin',
        fieldType: 'multiple-input',
        default: '0,,,0',
        number: 4,
        show: (data) => data['position'] && data['position'] !== 'static',
        description: '上,右,下,左'
      },
      {
        name: '堆叠顺序',
        fieldName: 'z-index',
        fieldType: 'number',
        default: 0,
        show: (data) => data['position'] && data['position'] !== 'static'
      },
    ]
  },
  {
    name: '间距',
    type: 'group',
    children: [
      {
        name: '外边距',
        fieldName: 'margin',
        fieldType: 'multiple-number',
        number: 4,
        description: '上,右,下,左'
      },
      {
        name: '边距',
        fieldName: 'padding',
        fieldType: 'multiple-number',
        number: 4,
        description: '上,右,下,左'
      }
    ]
  },
  {
    name: '尺寸',
    type: 'group',
    children: [
      {
        name: '宽度',
        fieldName: 'width',
        fieldType: 'input',
      },
      {
        name: '高度',
        fieldName: 'height',
        fieldType: 'input',
      },
      {
        name: '溢出处理',
        fieldName: 'overflow',
        fieldType: 'buttons',
        default: '',
        options: [
          {key: '', value: '无'},
          {key: 'visible', value: '显示'},
          {key: 'hidden', value: '隐藏'},
          {key: 'scroll', value: '滚动'},
          {key: 'auto', value: '自动'},
        ],
      },
      {
        name: '显示滚动条',
        fieldName: 'scroll-bar',
        fieldType: 'switch',
        default: false,
        options: [
          {key: true, value: ''},
          {key: false, value: ''}
        ],
        show: data => data['overflow'] === 'scroll' || data['overflow'] === 'auto'
      }
    ]
  },
  {
    name: '边框',
    type: 'group',
    children: [
      {
        name: '弧度',
        fieldName: 'radius-type',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'simple', value: '总体'},
          {key: 'complex', value: '分项'},
        ],
      },
      {
        name: '四角',
        fieldName: 'border-radius',
        fieldType: 'number',
        default: 0,
        show: (data) => data['radius-type'] === 'simple'
      },
      {
        name: '左上角',
        fieldName: 'border-top-left-radius',
        fieldType: 'number',
        default: 0,
        show: (data) => data['radius-type'] === 'complex'
      },
      {
        name: '右上角',
        fieldName: 'border-top-right-radius',
        fieldType: 'number',
        default: 0,
        show: (data) => data['radius-type'] === 'complex'
      },
      {
        name: '左下角',
        fieldName: 'border-bottom-left-radius',
        fieldType: 'number',
        default: 0,
        show: (data) => data['radius-type'] === 'complex'
      },
      {
        name: '右下角',
        fieldName: 'border-bottom-right-radius',
        fieldType: 'number',
        default: 0,
        show: (data) => data['radius-type'] === 'complex'
      },
      {
        name: '边框',
        fieldName: 'border-type',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'simple', value: '总体'},
          {key: 'top', value: '上'},
          {key: 'right', value: '右'},
          {key: 'bottom', value: '下'},
          {key: 'left', value: '左'},
        ],
      },
      {
        name: '边框样式',
        fieldName: 'border-style',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'solid', value: '实线'},
          {key: 'dotted', value: '点线'},
          {key: 'dashed', value: '虚线'},
          {key: 'double', value: '双线'},
        ],
        show: (data) => data['border-type'] === 'simple'
      },
      {
        name: '边框宽度',
        fieldName: 'border-width',
        fieldType: 'number',
        default: 0,
        show: (data) => data['border-type'] === 'simple'
      },
      {
        name: '边框颜色',
        fieldName: 'border-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['border-type'] === 'simple'
      },
      {
        name: '边框样式',
        fieldName: 'border-top-style',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'solid', value: '实线'},
          {key: 'dotted', value: '点线'},
          {key: 'dashed', value: '虚线'},
          {key: 'double', value: '双线'},
        ],
        show: (data) => data['border-type'] === 'top'
      },
      {
        name: '边框宽度',
        fieldName: 'border-top-width',
        fieldType: 'number',
        default: 0,
        show: (data) => data['border-type'] === 'top'
      },
      {
        name: '边框颜色',
        fieldName: 'border-top-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['border-type'] === 'top'
      },
      {
        name: '边框样式',
        fieldName: 'border-right-style',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'solid', value: '实线'},
          {key: 'dotted', value: '点线'},
          {key: 'dashed', value: '虚线'},
          {key: 'double', value: '双线'},
        ],
        show: (data) => data['border-type'] === 'right'
      },
      {
        name: '边框宽度',
        fieldName: 'border-right-width',
        fieldType: 'number',
        default: 0,
        show: (data) => data['border-type'] === 'right'
      },
      {
        name: '边框颜色',
        fieldName: 'border-right-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['border-type'] === 'right'
      },
      {
        name: '边框样式',
        fieldName: 'border-bottom-style',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'solid', value: '实线'},
          {key: 'dotted', value: '点线'},
          {key: 'dashed', value: '虚线'},
          {key: 'double', value: '双线'},
        ],
        show: (data) => data['border-type'] === 'bottom'
      },
      {
        name: '边框宽度',
        fieldName: 'border-bottom-width',
        fieldType: 'number',
        default: 0,
        show: (data) => data['border-type'] === 'bottom'
      },
      {
        name: '边框颜色',
        fieldName: 'border-bottom-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['border-type'] === 'bottom'
      },
      {
        name: '边框样式',
        fieldName: 'border-left-style',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'solid', value: '实线'},
          {key: 'dotted', value: '点线'},
          {key: 'dashed', value: '虚线'},
          {key: 'double', value: '双线'},
        ],
        show: (data) => data['border-type'] === 'left'
      },
      {
        name: '边框宽度',
        fieldName: 'border-left-width',
        fieldType: 'number',
        default: 0,
        show: (data) => data['border-type'] === 'left'
      },
      {
        name: '边框颜色',
        fieldName: 'border-left-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['border-type'] === 'left'
      },
    ]
  },
  {
    name: '效果',
    type: 'group',
    children: [
      {
        name: '透明度',
        fieldName: 'opacity',
        fieldType: 'number',
        point: 1,
        default: 1.0,
      },
      {
        name: '手势',
        fieldName: 'cursor',
        fieldType: 'select',
        default: '',
        options: [
          {key: 'default', value: '默认'},
          {key: 'pointer', value: '手指'},
          {key: 'text', value: '文本'},
          {key: 'copy', value: '复制'},
          {key: 'move', value: '移动'},
          {key: 'help', value: '帮助'},
          {key: 'wait', value: '等待'},
          {key: 'crosshair', value: '十字'},
        ],
      },
      {
        name: '阴影样式',
        fieldName: 'box-shadow-style',
        fieldType: 'buttons',
        default: 'none',
        options: [
          {key: 'none', value: '无'},
          {key: 'inset', value: '内阴影'},
          {key: 'outset', value: '外阴影'},
        ],
      },
      {
        name: '阴影颜色',
        fieldName: 'box-shadow-color',
        fieldType: 'color-picker',
        default: '#ffffff',
        show: (data) => data['box-shadow-style'] !== 'none'
      },
      {
        name: '水平偏移',
        fieldName: 'box-shadow-horizontal',
        fieldType: 'number',
        point: 0,
        default: 0,
        show: (data) => data['box-shadow-style'] !== 'none'
      },
      {
        name: '垂直偏移',
        fieldName: 'box-shadow-vertical',
        fieldType: 'number',
        point: 0,
        default: 0,
        show: (data) => data['box-shadow-style'] !== 'none'
      },
      {
        name: '模糊半径',
        fieldName: 'box-shadow-blur',
        fieldType: 'number',
        point: 0,
        default: 0,
        show: (data) => data['box-shadow-style'] !== 'none'
      },
      {
        name: '阴影大小',
        fieldName: 'box-shadow-spread',
        fieldType: 'number',
        point: 0,
        default: 0,
        show: (data) => data['box-shadow-style'] !== 'none'
      }
    ]
  },
  {
    name: '自定义样式',
    type: 'group',
    children: [
      {
        name: '',
        fieldName: 'extendCss',
        fieldType: 'textarea',
      }
    ]
  },
]
